
<template>
  <el-card>
    <div slot="header" class="clearfix">
      <h2>账号设置</h2>
    </div>
    <el-form label-width="80px" size="large">
      <el-form-item label="绑定手机" v-model="saveAccountForm">
        <el-input v-model="saveAccountForm.phone" placeholder="157****7224"></el-input>
<!--        <el-button slot="append" @click="editPhone">修改手机</el-button>-->
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="saveAccountForm.email" placeholder="存在风险，请绑定邮箱"></el-input>
<!--        <el-button slot="append" @click="bindEmail">绑定邮箱</el-button>-->
      </el-form-item>
<!--      <el-form-item label="三方账号">-->
<!--        <el-input placeholder="微信"></el-input>-->
<!--        <el-button slot="append" @click="bindWechat">绑定/解绑</el-button>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="登录记录">-->
<!--        <el-button type="text" @click="viewRecords">查看记录</el-button>-->
<!--      </el-form-item>-->

      <el-form-item label="账号注销">
        <el-button type="text" @click="logout">立即注销</el-button>

      </el-form-item>
      <el-button color="#0089BA" style="width: 200px; margin: 20px auto;" @click="saveAccount" >保存</el-button>
    </el-form>


  </el-card>
<!--  <el-card>-->
<!--        <template #default="scope">-->
<!--          <el-button link type="primary" size="small"-->
<!--                     @click="logout(scope.row.id)">注销用户</el-button>-->
<!--        </template>-->
<!--  </el-card>-->
</template>
<script setup>
import {onMounted, ref} from 'vue';
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
import router from "@/router";

const user= ref(getUser());
//定义保存用户的信息
//定义对象保存查询条件
const saveAccountForm = ref({
  phone:'',
  email:''

});

//加载个人信息数据
const loadAccountForm = ()=>{
let id = user.value.id;
axios.get(BASE_URL+'/v1/user/selectId?id='+id).then((response)=>{
if (response.data.code==2000){
  saveAccountForm.value = response.data.data;

}else{
ElMessage.error(response.data.msg);
}
})
}
onMounted(()=> {
  loadAccountForm();//一进入页面就需要加载个人信息
})
//保存个人信息
const saveAccount = ()=>{
  saveAccountForm.value.id=user.value.id;
  console.log(saveAccountForm.value)
  let data = qs.stringify(saveAccountForm.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/user/save',data).then((response)=>{
if (response.data.code == 2000){
ElMessage.success('保存成功!');
  saveAccountForm.value={};
  loadAccountForm();
}else{
ElMessage.error('保存失败！');
}
})
}
const logout = ()=>{
  let userId=getUser().id;
  console.log(userId);
  if (confirm('确定要注销账号吗?')){
    axios.post(BASE_URL+'/v1/user/deleteUser/'+userId).then((response)=> {
      if (response.data.code == 2000) {
        // localStorage.removeItem('user');
        // setTimeout(() => {
        //   window.location.href = '/login';
        // }, 1500);
        // if (user) {
        //   user.value = null;
        // }
        router.push('/login');
        ElMessage.success('注销成功!');
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}



</script>
<style scoped>

</style>